<template>
	<view class="firstVisit">
		<Navigation title="初诊结果" background="#fff" />
		<view class="ph-32 pv-32 background-white f ai-c">
			<image :src="petInfo.avatar" class="w-100 h-100 b-12 mr-20"></image>
			<view>
				<view class="fs-28 fw-600 text-color1">{{petInfo.name}}</view>
				<view class="fs-24 text-color3 mt-4">{{ petInfo.secondCategoryName }}/{{ petInfo.gender == 1 ? 'GG' : 'MM' }}/{{ petInfo.age }}岁</view>
			</view>
		</view>
		<view class="ph-20">
			<view class="w-f mt-20 b-24 ph-28 pv-28 background-white">
				<view class="fs-32 fw-600 text-color4 title">初诊症状诊断结果</view>
				<view class="fs-28 text-color2 mt-12">{{detail.diagnosisResult}}</view>
			</view>
			<view class="w-f mt-20 b-24 ph-28 pv-28 background-white">
				<view class="fs-32 fw-600 text-color4 title">可能引发原因</view>
				<view class="fs-28 text-color2 mt-12">{{detail.reason}}</view>
			</view>
			<view class="w-f mt-20 b-24 ph-28 pv-28 background-white">
				<view class="fs-32 fw-600 text-color4 title">常见处置方法</view>
				<view class="fs-28 text-color2 mt-12">{{detail.dispose}}</view>
			</view>
		</view>
		<view class="w-f ph-40 bot h-136 pt-20">
			<view class="f w-f ai-c jc-c btn h-96 b-96" @click="toList">
				<image src="http://cwht.ricecs.cn/app/index/ask.png" class="w-32 h-32 mr-12"></image>
				<view class="fs-32 fw-600 text-color5">咨询医生</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { mypetProfileDetail } from '@/services/api/pet';
	const detail = ref({});
		const petInfo = ref({});
	const petId = ref('')
	onLoad((opt : any) => {
		petId.value = opt.petId
		getPetInfo()
		detail.value = uni.getStorageSync('disease');
	});
	async function getPetInfo() {
	    const {data}=await mypetProfileDetail(petId.value);
			petInfo.value=data
	}
	function toList(){
		uni.navigateTo({
			url:'/pages_index/doctor'
		})
	}
</script>
<style lang="scss" scoped>
	.firstVisit {
		background: #f5f5f5;
		min-height: 100vh;

		.bot {
			position: fixed;
			left: 0;
			bottom: 0;
			background: #ffffff;

			.btn {
				background: #fabb3d;
			}
		}

		.background-white {
			background: #fff;
		}

		.title {
			position: relative;
		}

		.title::after {
			position: absolute;
			content: '';
			width: 6rpx;
			height: 32rpx;
			background: #fabb3c;
			left: -28rpx;
			top: 4rpx;
		}
	}
</style>